@extends('layouts.app')

@section('content')

    {{--房子列表--}}
    <el-row>
        <div class="house-title">（@{{ buildingDetail.name }}）房间列表</div>
        <div class="house-content">
            <el-row class="floor-list" v-for="item in buildingDetail.floor_num" :key="item">
                <el-col :span="4">@{{ item }}</el-col>
                <el-col :span="20">
                    <el-button v-for="(room, i) in floorList[item]"
                               :key="i"
                               :type="room.status === '1' ? 'danger' : 'primary'"
                               @click="showRoomDetail(room)"
                               size="mini">@{{ room.room_num }}</el-button>
                    <el-button type="normal"
                               @click="roomAdd(item)"
                               size="mini">新增</el-button>
                </el-col>
            </el-row>
        </div>
    </el-row>
    <el-dialog
            title="房间信息"
            :visible.sync="dialog.isShow"
            width="90%">
        <el-form label-width="60px">
            <el-form-item label="楼层">
                <el-input v-model="roomDetail.floor_num" disabled></el-input>
            </el-form-item>
            <el-form-item label="房号" required>
                <el-input v-model="roomDetail.room_num"></el-input>
            </el-form-item>
            <el-form-item label="房名">
                <el-input v-model="roomDetail.name"></el-input>
            </el-form-item>
            <el-form-item label="面积">
                <el-input v-model="roomDetail.area"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
                <el-input v-model="roomDetail.contact_name"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="roomDetail.phone"></el-input>
            </el-form-item>
            <el-form-item label="状态" required>
                <el-radio-group v-model="roomDetail.status">
                    <el-radio label="1">已租</el-radio>
                    <el-radio label="0">未租</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="图集">
                <el-upload
                        name="file"
                        multiple
                        :data="{_token: '{{csrf_token()}}'}"
                        action="/community/upload"
                        :on-success="function(r, f, l){return fileSuccess(r, f, l, 'pics')}"
                        :on-preview="filePreview"
                        :on-remove="function(f, l){return fileRemove(f, l, 'pics')}"
                        :file-list="roomDetail.pics"
                        :on-exceed="fileExceed"
                        list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
                </el-upload>
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="roomDetail.description"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="roomDetail.remarks"></el-input>
            </el-form-item>
        </el-form>
        <el-row style="text-align:center;">
            <el-button type="primary" @click="roomSave" :disabled="dialog.disabled">保存</el-button>
        </el-row>
    </el-dialog>
    <el-dialog
            title="图片展示"
            :visible.sync="picsDialog.isShow"
            width="90%">
        <el-carousel :interval="3000" :autoplay="false" arrow="always" :height="picsDialog.height">
            <el-carousel-item v-for="(item, index) in picsDialog.data" :key="index">
                <img :src="item.url" alt="" width="100%" @click="imgDetail(item.url)">
            </el-carousel-item>
        </el-carousel>
    </el-dialog>
@endsection

@section('js')
    <script src="/js/building/detail.js?v=20191117"></script>
@endsection